
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML Input file美化</title>
    <link rel="stylesheet" type="text/css" href="webuploader-master/css/webuploader.css">

<!--引入JS-->
<link rel="stylesheet" type="text/css" href="webuploader-master/examples/image-upload/style.css" />
    
    <style type="text/css">
    body{background-color: #eee;}
        a{text-decoration:none;}
        a[class="button-selectimg"],input[type='submit']{color:#00A2D4;padding:4px 6px;border:1px dashed #00A2D4;border-radius:2px;}
        .input-file{margin:200px 300px;}
        input[id="avatval"]{padding:3px 6px;padding-left:10px;border:1px solid #E7EAEC;width:230px;height:25px;line-height:25px;border-left:3px solid #3FB7EB;background:#FAFAFB;border-radius:2px;}
        input[type='file']{border:0px;display:none;}
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#avatsel").click(function(){
                $("input[type='file']").trigger('click');
            });
            $("#avatval").click(function(){
                $("input[type='file']").trigger('click');
            });
            $("input[type='file']").change(function(){
                $("#avatval").val($(this).val());
            });
        });
    </script>
</head>
<body>
<iframe src="introduce.html" width=100% height ="590px"></iframe>
    <div id="wrapper">
        <div id="container">
            <!--头部，相册选择和格式选择-->
            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或将照片拖到这里</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="webuploader-master/examples/image-upload/jquery.js"></script>
    <script type="text/javascript" src="webuploader-master/dist/webuploader.js"></script>
    <script type="text/javascript" src="webuploader-master/examples/image-upload/upload.js"></script>

<form method="post" action="/OCRv1.1/UploadServlet" enctype="multipart/form-data">
    选择一个文件:
     <input type="text" id="avatval" placeholder="请选择文件···" readonly="readonly" style="vertical-align: middle;"/>
            <input type="file" name="avatar" id="avatar"/>
            <a href="javascript:void(0);" class="button-selectimg" id="avatsel">选择文件</a>
            <input type="submit" name="" id="" value="提交" />
</form>
<br><br><br><br><br>
</body>
</html>